<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="ptb20 plr30">
				<view class="item" v-for="(item,index) in jobFairsCompanies">
					<view class="m-ellipsis-l2 fs28 fwb col3 lh40 h80">{{item.enterprise.company_name}}</view>
					<view class="fs26 lh36 fs26 mt10 m-ellipsis"><text class="col4">{{item.jobs.length}}</text>个在招职位</view>
					<view class="h90">
						<view class="flex-box mt15 fs24 col3" v-for="(job,jobIndex) in item.jobs">
							<image src="https://admin.mosizp.cn/static/public/icon_true.png" mode="aspectFill" class="ico24"></image>
							<view class="flex-grow-1 plr10 m-ellipsis">{{job.job_name}}</view>
							<view class="size">{{job.salary_text}}</view>
						</view>
					</view>
					
					<view class="btn" @click="bindGoCompany(item.company_id)">查看详情</view>
				</view>
				
				<view class="nothing" v-if="jobFairsMore.nothing">
					<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
					<text>暂无招聘会信息</text>
				</view>
				<view class="g-btn3-wrap" v-else>
					<view class="g-btn3" @click="fetch()">{{jobFairsMore.text}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				jobFairsCompanies: [],
				jobFairsCompaniesMore: {page:1},
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			
			this.fetch();
		},
		onReachBottom() {
			this.fetch();
		},
		methods: {
			fetch() {
			    this.$util.fetch(this, 'xilujob.job_fairs/my_view', {pagesize:10}, 'jobFairsCompaniesMore', 'jobFairsCompanies', 'data', 'unique');
			},
			//企业主页
			bindGoCompany(id) {
			    uni.navigateTo({url: '/pages/user/company_info?id='+id});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 335rpx;
		height: 430rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		display: inline-block;
		margin-top: 20rpx;
		margin-right: 20rpx;
		padding: 30rpx;
		vertical-align: top;

		&:nth-of-type(2n) {
			margin-right: 0;
		}

		.h80 {
			height: 80rpx;
		}

		.size {
			font-size: 22rpx;
			color: var(--primary);
			font-weight: bold;
			padding: 0 5rpx;
			min-width: 131rpx;
			height: 38rpx;
			line-height: 38rpx;
			text-align: center;
			background: rgba(42, 121, 242, .1);
			border-radius: 19rpx;
		}

		.btn {
			width: 264rpx;
			height: 62rpx;
			line-height: calc(62rpx - 2px);
			text-align: center;
			font-weight: bold;
			font-size: 24rpx;
			color: var(--primary);
			border-radius: 8rpx;
			border: 1px solid var(--primary);
			margin-left: auto;
			margin-right: auto;
			margin-top: 20rpx;
		}
	}
	.h90{height: 142rpx;}
</style>